<template>
  <div class="mentions-chart positive-mentions">
    <div class="mentions-chart__header">Top 5 Positive Mentions</div>
    <div class="mentions-chart__body">
      <PieChart :option="chartOptions" :height="'1.0417rem'"></PieChart>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";

export default {
  components: {
    PieChart,
  },
  data() {
    return {
      chartOptions: {
        tooltip: {
          trigger: "axis", 
          axisPointer: {
            type: "shadow",
          },
        },
        // legend: {
        //   orient: "horizontal",
        //   bottom: "0%",
        //   left: "center",
        //   icon: "circle",
        //   itemWidth: 12,
        //   itemHeight: 12,
        //   itemGap: 25,
        //   textStyle: {
        //     fontSize: 12,
        //     fontWeight: 400,
        //     color: "rgba(0, 0, 0, 0.7)",
        //   },
        // },
        grid: {
          left: "200px",
          right: "5%",
          top: "0%",
          bottom: "0%",
          containLabel: false,
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          data: [
            "Connect with more OTAs1",
            "Connect with more OTAs",
            "Forecast trends in occupancy",
            "Competitor benchmarking",
            "Real-time insights with key KPl",
          ],
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            align: "left",
            margin: 200,
            verticalAlign: "middle",
            color: "#232323",
            fontSize: 12,
            overflow: "truncate",
            fontWeight: "400",
          },
          boundaryGap: [0.1, 0.1],
        },
        series: [
          {
            name: "Real rate",
            type: "bar",
            stack: "total",
            barWidth: 23,
            label: {
              show: true,
              position: "insideRight",
              formatter: (params) => {
                const total = 2380;
                const percent = Math.round((params.value / total) * 100);
                return `${percent}%`;
              },
              color: "#fff",
              fontSize: 10,
            },
            emphasis: {
              focus: "series",
            },
            data: [1890, 1790, 1690, 1590, 1990],
            itemStyle: {
              color: "#2faa68",
              borderColor: "#fff",
              borderWidth: 2,
              borderRadius: [6, 6, 6, 6],
            },
          },
          // {
          //   name: "Potential rate",
          //   type: "bar",
          //   stack: "total",
          //   barWidth: 23,
          //   label: {
          //     show: true,
          //     position: "insideRight",
          //     formatter: (params) => {
          //       const total = 2380;
          //       const percent = Math.round((params.value / total) * 100);
          //       return `${percent}%`;
          //     },
          //     color: "#fff",
          //     fontSize: 10,
          //   },
          //   emphasis: {
          //     focus: "series",
          //   },
          //   data: [390, 390, 390, 490, 390],
          //   itemStyle: {
          //     color: "rgba(33, 199, 80, 0.4)",
          //     borderColor: "#fff",
          //     borderWidth: 2,
          //     borderRadius: [6, 6, 6, 6],
          //   },
          // },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.mentions-chart {
  background: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid #cdcccc;
  display: flex;
  flex-direction: column;

  &__header {
    font-size: 18px;
    color: #454545;
    font-weight: 600;
  }

  &__body {
    margin-top: 16px;
    // background: red;
  }

  &.positive-mentions {
    // 正面评价特有样式
    .mentions-chart__header {
      color: #454545; // 保持原有颜色
    }
  }
}
</style>